<!--  -->
<template>
  <div class="form-list">
    <TipTotal title="系统表单数据列表">
      <template slot="total">
        <p class="totalR" v-if="total">表单数（<span
          class="green">{{currentSite && currentSite.language && currentSite.language.name}}</span>）：{{total}}</p>
      </template>
      <div class="notice"><i class="el-icon-info" style="color:#E6A23C; margin-left:-5px; margin-right:10px;"></i>说明：浏览前台系统详情页面用户提交表单内容至此！</div>
    </TipTotal>
    <div>
      <div class="operate-form-list dffr">
        <el-button type="primary" @click="createForm">创建表单</el-button>
        <el-button type="success" @click="resetData">刷新</el-button>
      </div>
    </div>
    <!-- 列表数据 -->
    <DataTable ref="formDataTable" :dataTotal="dataTotal" />
    <div style="height: 18px;"></div>
    <!-- 创建表单 -->
    <el-dialog
      title="创建表单"
      :visible.sync="dialogFormVisible"
      width="490px"
      @closed="closed"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        v-loading="labelLoading"
        :rules="rules"
        ref="labelSave"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item
          label="表单名称"
          prop="name"
        >
          <el-input
            v-model.trim="form.name"
            autocomplete="off"
            size="medium"
            style="width: 370px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="挂载系统"
          prop="systemId"
        >
          <el-select size="medium" v-model="form.systemId" style="width: 370px;" placeholder="选择挂载系统">
            <el-option v-for="item in systemMount" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button size="small" @click="closed">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TipColla from '@/components/common/TipColla.vue'
import TipTotal from '@/components/common/TipTotal.vue'
import DataTable from '@/components/main/user/form/sysformlist/DataTable.vue'
import { mapGetters } from 'vuex'
export default {
  created () {
  },
  data () {
    var checkIshas = (rule, value, callback) => {
      let bool = true
      this.tableData.map(item => {
        if (item.id !== this.form.id) {
          if (value === item.name) {
            bool = false
          }
        }
      })
      if (!bool) {
        callback(new Error('表单名称已存在'))
      } else {
        return callback()
      }
    }
    return {
      total: 0,
      dialogFormVisible: false,
      labelLoading: false,
      tableData: [],
      // 可挂载系统
      systemMount: [],
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入表单名称', trigger: 'blur' },
          { min: 1, max: 24, message: '表单名称长度不能超过24个字！', trigger: 'blur' },
          { validator: checkIshas, trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {

  },
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  components: {
    TipColla,
    TipTotal,
    DataTable
  },
  methods: {
    dataTotal (total) {
      this.total = '' + total
    },
    resetData () {
      this.$refs['formDataTable'].resetData()
    },
    getData () {
      this.tableData = this.$refs['formDataTable'].getTableData()
    },
    // create () {
    //   // 创建表单
    //   this.$prompt('输入创建表单名称！', '新增', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     closeOnClickModal: false,
    //     inputValidator: (str) => {
    //       if (str && str.trim().length > 24) {
    //         return '表单名称长度不能超过24个字！'
    //       }
    //       if (!str || str.trim().length === 0) {
    //         return '表单名称不能为空！'
    //       }
    //       return true
    //     },
    //     inputErrorMessage: '表单名称不真确'
    //   }).then(({ value }) => {
    //     // 请求后台添加
    //     this.$post('/form/system-form-create', {
    //       name: value
    //     }).then(response => {
    //       let list = response.list
    //       if (list && list.length > 0) {
    //         this.resetData()
    //       }
    //     })
    //   }).catch(() => { })
    // },
    createForm () {
      this.getData()
      // 获取可挂载表单的系统数据
      this.$post('/system/allow-mount-form-system-list').then(response => {
        if (response && response.length > 0) {
          this.systemMount = response
        }
      })
      this.dialogFormVisible = true
    },
    submit () {
      this.$refs['labelSave'].validate((valid) => {
        if (valid) {
          this.labelLoading = true
          // 请求后台添加
          this.$post('/form/system-form-create', {
            name: this.form.name,
            systemId: this.form.systemId ? this.form.systemId : 0
          }).then(response => {
            if (response) {
              this.resetData()
              this.labelLoading = false
            }
            this.dialogFormVisible = false
          }).catch(() => {
          })
        } else {
          return false
        }
      })
    },
    closed () {
      this.labelLoading = false
      this.form.name = ''
      this.form.systemId = null
      this.systemMount = []
      if (this.$refs['labelSave']) {
        this.$refs['labelSave'].clearValidate()
      }
      this.dialogFormVisible = false
    }
  }
}

</script>

<style scoped>
.totalR {
  float:right;
  margin-right:8px;
  margin-top:6px;
  font-size: 14px;
  color:#666;
}
</style>
